<!--suppress ALL -->
<template>
	<div class="page filesLibDetail-page" data-page="filesLibDetail" style="z-index: 2;">
		<div class="link-page-nav">
			<a href="#" class="link" @click="$root.backToTab()"> <i class="iconfont icon-zuo"></i>
			</a>
		</div>
		<div class="link-page-top">
			<div class="link-page-list-title">档案</div>
		</div>
		<div class="page-content pdb100" style="padding-bottom: 120px;">
			<div class="page-item">
				<img class="view-pic_file" id="viewUrl_file" src="">
			</div>
			<div id="orgType_file" style="color: #E07762; font-size: 14px; margin-left: 20px;"></div>
			<div class="filesLib-org">
				<div class="filesLib-org-item" id="orgInfo">
					<div class="item1">
						<p>-</p>
						<p>
							<span>-</span>
						</p>
					</div>
					<div class="item2">
						<img alt="" src="">
					</div>
				</div>
			</div>
			<div class="list links-list" style="padding: 20px 0px;margin: 0px;">
				<ul id="followCountList_file">
					<li class="focus-permiss" data-link="" style="display: list-item;"><a href="#" @click="shiftSchedule"
							class="mine-item-content" data-view="">
							<div class="item-media">
								<i class="link-icon link-icon-menu-shiftSchedule"></i>
							</div>
							<div class="item-inner mine-item-inner" style="margin-left: 0px;">
								<div class="item-title">值班表</div>
								<div class="item-after"></div>
							</div>
						</a></li>
					<li class="focus-permiss" data-link="" style="display: list-item;">
						<a href="#" @click="viewFireDraw" class="mine-item-content" data-view="">
							<div class="item-media">
								<i class="link-icon link-icon-menu-fireDrawing"></i>
							</div>
							<div class="item-inner mine-item-inner" style="margin-left: 0px;">
								<div class="item-title">消防图纸</div>
								<div class="item-after"></div>
							</div>
						</a>
					</li>
					<li class="focus-permiss" data-link="" style="display: list-item;"><a href="#" @click="IndoorMap"
							class="mine-item-content" data-view="">
							<div class="item-media">
								<i class="link-icon link-icon-menu-cg"></i>
							</div>
							<div class="item-inner mine-item-inner" style="margin-left: 0px;">
								<div class="item-title">室内地图</div>
								<div class="item-after"></div>
							</div>
						</a></li>
					<li class="focus-permiss" data-link="" style="display: list-item;"><a href="#" @click="viewVR"
							class="mine-item-content" data-view="">
							<div class="item-media">
								<i class="link-icon link-icon-menu-vr"></i>
							</div>
							<div class="item-inner mine-item-inner" style="margin-left: 0px;">
								<div class="item-title">VR</div>
								<div class="item-after"></div>
							</div>
						</a></li>
				</ul>
			</div>
			<div class="content-list" id="fire-unit-info">
				<div class="content-title">消防重点人员信息</div>
				<div id="contacts_file">
					<div class="content-list-item">
						<div class="content-list-left">法人代表</div>
						<div class="content-list-right">
							暂无数据<span class="tel"></span>
						</div>
					</div>
					<div class="content-list-item">
						<div class="content-list-left">安全责任人</div>
						<div class="content-list-right">
							暂无数据<span class="tel"></span>
						</div>
					</div>
					<div class="content-list-item">
						<div class="content-list-left">安全管理人</div>
						<div class="content-list-right">
							暂无数据<span class="tel"></span></span>
						</div>
					</div>
				</div>
				<div class="content-staff-phone" id="firefighters"></div>
			</div>
			<div class="content-list" id="informatiom">
				<div class="content-title">消防属性</div>
				<!-- 			<div class="content-list-item">
				<div class="content-list-left">多产权建筑</div>
				<div class="content-list-right">-</div>
			</div> -->
				<div class="content-list-item">
					<div class="content-list-left">建筑面积</div>
					<div class="content-list-right">暂无</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">占地面积</div>
					<div class="content-list-right">-</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">消控室位置</div>
					<div class="content-list-right">-</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">消控室电话</div>
					<div class="content-list-right">-</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">微型消防站</div>
					<div class="content-list-right">暂无</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">专职消防队</div>
					<div class="content-list-right">暂无</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">兼职消防队</div>
					<div class="content-list-right">暂无</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">消防备案</div>
					<a href="#" @click="viewPicUrl">
						<div class="content-list-right" style="color: #2471CA;">查看图片</div>
					</a>
				</div>
			</div>
			<div class="content-list" id="maintenance-info">
				<div class="content-title">维保公司</div>
				<div class="content-list-item">
					<div class="content-list-left">名称</div>
					<div class="content-list-right">-</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">合同号</div>
					<div class="content-list-right">-</div>
				</div>
				<div class="content-list-item">
					<div class="content-list-left">合同期限</div>
					<div class="content-list-right">-</div>
				</div>
			</div>
			<div class="content-list">
				<div class="content-title">维保人员</div>
				<div id="filesLibItem" style="display: inline-block; width: 100%;">
					<div class="area-panels">
						<a href="tel:13605605702" onclick="window.location='tel:13605605702'">
							<p style="color: #333333">
								张本柱 <i class="iconfont icon-phone-channel phone"></i>
							</p>
							<p class="area" style="color: #999; font-size: 12px; margin-top: 10px;">管理员</p>
						</a>
					</div>
					<div class="area-panels" style="margin-right: 0">
						<a href="tel:13872319432" onclick="window.location='tel:13872319432'">
							<p>
								一般用户 <i class="iconfont icon-phone-channel phone"></i>
							</p>
							<p class="area" style="color: #999; font-size: 12px; margin-top: 10px;">-</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	return {
		data: function () {
			return {
				organizationId: this.$route.params.orgId,
				orgName: "",
				// roleIds:"", //维保公司角色id
				vrUrl: "",
				picUrl: "", // 消防备案
				picturesUrl: "", //总平面布置图
				drawingPicturesUrls: "", //其它图纸
			}
		},
		methods: {
			getFilesLibDetail: function () {
				var self = this;
				Dao.getFullInfoExt({
					orgId: self.organizationId,
				}, function (data) {
					if (data) {
						jQuery("#orgType_file").html(data.fireTypeName);
						if (data.viewUrl) {
							$("#viewUrl_file").attr("src", data.viewUrl).show();
						} else {
							$("#viewUrl_file").hide();
						}
						self.orgName = data.name;
						$("#orgInfo .item1").html(`
								<p>` + data.name + `</p>
								<p>
									<span>` + data.address + `</span>
								</p>
								`);
						$("#orgInfo .item2 img").attr("src", common.transNullundefined(data.logoUrl));

						self.vrUrl = encodeURIComponent(data.vrUrl);
						self.picUrl = encodeURIComponent(data.fireStationRecordUrl);
						self.picturesUrl = encodeURIComponent(data.picturesUrl);
						self.drawingPicturesUrls = encodeURIComponent(data.drawingPicturesUrls);

						$("#informatiom .content-list-item").eq(1).find(
							".content-list-right").html(data.floorSpace ? (data.floorSpace + "㎡") : "暂无");
						$("#informatiom .content-list-item").eq(0).find(
							".content-list-right").html(data.overallFloorage ? (data.overallFloorage + "㎡") : "暂无");
						/* 	$("#informatiom .content-list-item").eq(3).find(".right").html();
						$("#informatiom .content-list-item").eq(4).find(".right").html(); */
						$("#informatiom .content-list-item").eq(4).find(
							".content-list-right").html(
							data.isMircoFireStation == "" ? "无" : "有");
						$("#informatiom .content-list-item").eq(5).find(
							".content-list-right").html(
							data.isFullTimeStation == "" ? "无" : "有");
						$("#informatiom .content-list-item").eq(6).find(
							".content-list-right").html(
							data.isPartTimeStation == "" ? "无" : "有");
						/* $("#informatiom .content-list-item").eq(0).find(".right").html(); */
						$("#maintenance-info .content-list-item").eq(0).find(
							".content-list-right").html(data.maintainCompanyName || "暂无");
						if (typeof (ZHXF_IS_AIO) != 'undefined' && ZHXF_IS_AIO) {
							$("#maintenance-info .content-list-item").eq(1).find(
								".content-list-left").html('联系人');
							$("#maintenance-info .content-list-item").eq(1).find(
								".content-list-right").html(data.contact || '暂无');
							$("#maintenance-info .content-list-item").eq(2).find(
								".content-list-left").html('联系方式');
							$("#maintenance-info .content-list-item").eq(2).find(
								".content-list-right").html(data.tel || '暂无');
						} else {
							$("#maintenance-info .content-list-item").eq(1).find(
								".content-list-right").html(data.maintainContract == "" ? "暂无" : data.maintainContract);
							if (data.maintainStartDate != "") {
								var startDate = data.maintainStartDate;
								startDate = moment(startDate.substring(0, 10)).format('YYYY年MM月DD日');
							} else {
								var startDate = "暂无";
							}
							if (data.maintainEndDate != "") {
								var endtDate = data.maintainEndDate;
								endtDate = moment(endtDate.substring(0, 10)).format('YYYY年MM月DD日');
							} else {
								var endtDate = "暂无";
							}
							$("#maintenance-info .content-list-item").eq(2).find(
								".content-list-right").html(startDate + "-" + endtDate);
						}

						// 联系人
						if (data.contacts.length > 0) {
							$("#contacts_file").empty();
							var contacts = data.contacts;
							for (var i = 0; i < contacts.length; i++) {
								$("#contacts_file").append(`
									<div class="content-list-item">
										<div class="content-list-left">` + contacts[i].roleName + `</div> 
										<div class="content-list-right">` + contacts[i].name + `
											<span class="tel" ontouchstart = "return false;" onclick="window.location='tel:` + contacts[i].phone +
									`'">` + contacts[i].phone + `</span>
										</div>
									</div>`);
							}
						} else {
							$("#contacts_file").empty();
							$("#contacts_file").append(`
									<div class="content-list-item">
									    <div class="content-list-left">法人代表</div> 
									    <div class="content-list-right">暂无</div>
								    </div>
								    <div class="content-list-item">
									    <div class="content-list-left">安全责任人</div> 
									    <div class="content-list-right">暂无</div>
								    </div>
								    <div class="content-list-item">
									    <div class="content-list-left">安全责任人</div> 
									    <div class="content-list-right">暂无</div>
								    </div>
									`);
						}

						// 持证上岗人
						if (data.firefighters.length > 0) {
							$("#firefighters").empty();
							var firefighters = data.firefighters;
							for (var m = 0; m < firefighters.length; m++) {
								$("#firefighters").append(`
									<div class="content-staff-phone-item">
									<div class="content-staff-icon">
										<i class="iconfont icon-renyuanjieshao1"></i>
									</div>
									<div class="left">
										<img src="` + firefighters[m].certificateUrl + `" class="view-pic_file">
									</div>
									<div class="right">
										<p>` + firefighters[m].name + `</p>
										<p>持证人员 </p>
										<p ontouchstart = "return false;" onclick="window.location='tel:` + firefighters[m].tel + `'">` +
									firefighters[m].tel + `</p>
									</div>
								</div>`);
							}

							jQuery(".view-pic_file").off().click(function () {
								var picUrl = $(this).attr("src").split(",");
								openAndShowBigImage([picUrl], 0);
							});
						} else {
							$("#firefighters").empty();
						}

						self.getHaveOrgUserList();
					}
				});

				jQuery(".view-pic_file").off().click(function () {
					var picUrl = $(this).attr("src").split(",");
					openAndShowBigImage([picUrl], 0);
				});
			},
			// 值班表
			shiftSchedule: function () {
				app.router.navigate("/shiftSchedule/" + this.$route.params.orgId + "/");
			},
			//查看VR
			viewVR: function () {
				var self = this;
				if (self.vrUrl) {
					app.router.navigate("/VR/" + this.vrUrl + "/");
				} else {
					app.methods.showToastCenter("该单位暂无VR！");
				}
			},
			// 察看备案图片
			viewPicUrl: function () {
				if (this.picUrl) {
					app.router.navigate("/fireStationRecordUrl/" + this.picUrl + "/");
				} else {
					app.methods.showToastCenter("该单位暂无备案图片！");
				}
			},
			// 室内地图 
			IndoorMap: function () {
				var self = this;
				app.router.navigate("/IndoorMap/" + this.$route.params.orgId + "/" + self.orgName + "/");
			},
			// 消防图纸
			viewFireDraw: function () {
				if (this.picturesUrl == "") {
					app.methods.showToastCenter("该单位暂无消防图纸！");
				} else {
					if (this.drawingPicturesUrls == "") {
						this.drawingPicturesUrls = encodeURIComponent(
							"http://unit.dzxyhgy.kdlayun.com/rdspZd/resources/images/unitInfor/no_book.png")
					}
					app.router.navigate("/fireDrawing/" + this.picturesUrl + "/" + this.drawingPicturesUrls + "/");

				}
			},
			viewBuild: function () {
				app.router.navigate("/building/" + this.$route.params.orgId + "/");
			},
			getHaveOrgUserList: function () {
				var self = this;
				Dao.getHaveOrgUserListNotInRole({
					orgIds: self.organizationId,
					roleIds: maitenceUserId.toString(),
				}, function (data) {
					$("#filesLibItem").empty();
					if (data && data.length > 0) {
						for (var n = 0; n < data.length; n++) {
							$("#filesLibItem").append(`
									<div class="area-panels">
									<a href="tel:` + data[n].phone + `"
										ontouchstart = "return false;"
										onclick="window.location='tel:` + data[n].phone + `'">
										<p style="color: #333333">
											` + data[n].name + ` <i class="iconfont icon-phone-channel phone"></i>
										</p>
										<p class="area"
											style="color: #999; font-size: 12px; margin-top: 10px;">` + data[n].postName + `</p>
									</a>
								</div>`);
						}
					} else {

					}
				});
			}
		},
		on: {
			pageInit: function (e, page) {
				var self = this;
				self.getFilesLibDetail();
			},
		}
	}
</script>
<style scoped>
	#filesLibItem .area-panels:nth-child(even) {
		margin-right: 0px;
	}

	.content-staff-icon {
		position: absolute;
		right: 5px;
		top: 0;
		opacity: 0.05;
	}

	.content-staff-icon .iconfont {
		color: #2471CA;
		font-size: 30px;
	}

	.content-staff-phone-item {
		position: relative;
	}

	#followCountList_file:before {
		height: 0;
	}

	#followCountList_file:after {
		height: 0;
	}

	#followCountList_file li {
		text-decoration: none;
	}

	.list .item-inner:after {
		height: 0;
	}

	.links-list a:after {
		height: 0;
	}
</style>